<template> 
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold text-white mb-2 animate-glow">跨境政策对比分析</h1>
      <p class="text-electric-500">多维度对比全球主要经济体贸易政策</p>
    </div>

    <!-- 世界地图组件 -->
    <div class="glass-card p-6">
      <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
        <Globe class="w-5 h-5 mr-2 text-electric-500" />
        全球政策分布
      </h3>
      <WorldMapSVG />
    </div>

    <!-- 中国地图组件 -->
    <div class="glass-card p-6">
      <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
        <Flag class="w-5 h-5 mr-2 text-electric-500" />
        中国政策分布
      </h3>
      <ChinaMapSVG />
    </div>

    <!-- 对比选择器 -->
    <div class="glass-card p-6">
      <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
        <GitCompare class="w-5 h-5 mr-2 text-electric-500" />
        选择对比地区
      </h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div 
          v-for="region in availableRegions" 
          :key="region.id"
          class="region-selector"
          :class="{ 'selected': selectedRegions.includes(region.id) }"
          @click="toggleRegion(region.id)"
        >
          <component :is="region.icon" class="w-6 h-6 text-electric-500" />
          <span class="ml-3 font-medium">{{ region.name }}</span>
          <div v-if="selectedRegions.includes(region.id)" class="ml-auto">
            <Check class="w-5 h-5 text-green-400" />
          </div>
        </div>
      </div>
    </div>

    <!-- 对比结果 -->
    <div v-if="selectedRegions.length > 1" class="space-y-6">
      <!-- 综合评分对比 -->
      <div class="glass-card p-6">
        <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
          <BarChart3 class="w-5 h-5 mr-2 text-tech-blue-400" />
          综合评分对比
        </h3>
        <div class="h-80">
          <v-chart 
            :option="radarOption" 
            :autoresize="true"
            class="w-full h-full"
          />
        </div>
      </div>

      <!-- 详细对比表 -->
      <div class="glass-card p-6">
        <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
          <Table class="w-5 h-5 mr-2 text-yellow-400" />
          详细政策对比
        </h3>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b border-electric-500/30">
                <th class="text-left p-4 text-white font-semibold">对比项目</th>
                <th 
                  v-for="regionId in selectedRegions" 
                  :key="regionId"
                  class="text-center p-4 text-white font-semibold"
                >
                  {{ getRegionName(regionId) }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr 
                v-for="item in comparisonItems" 
                :key="item.key"
                class="border-b border-white/10 hover:bg-white/5"
              >
                <td class="p-4 text-white/80 font-medium">{{ item.name }}</td>
                <td 
                  v-for="regionId in selectedRegions" 
                  :key="regionId"
                  class="p-4 text-center"
                >
                  <span 
                    class="inline-block px-3 py-1 rounded-full text-sm"
                    :class="getScoreClass(getRegionData(regionId)[item.key])"
                  >
                    {{ getRegionData(regionId)[item.key] }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="glass-card p-12 text-center">
      <MapPin class="w-16 h-16 text-white/30 mx-auto mb-4" />
      <h3 class="text-xl text-white/60 mb-2">请选择至少两个地区进行对比</h3>
      <p class="text-white/40">选择您感兴趣的国家或地区，开始深入的政策对比分析</p>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import WorldMapSVG from '../components/WorldMapSVG.vue'
import ChinaMapSVG from '../components/ChinaMapSVG.vue'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  GitCompare, 
  Check, 
  BarChart3, 
  Table, 
  Star, 
  MapPin,
  Flag, 
  Building2, 
  Globe, 
  TrendingUp,
  Users,
  DollarSign,
  Ship
} from 'lucide-vue-next'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  name: 'RegionCompare',
  components: {
    VChart,
    GitCompare,
    Check,
    BarChart3,
    Table,
    Star,
    MapPin,
    Flag,
    Building2,
    Globe,
    TrendingUp,
    Users,
    DollarSign,
    Ship,
    WorldMapSVG,
    ChinaMapSVG, 
  },
  data() {
    return {
      selectedRegions: [],
      availableRegions: [
        { id: 'china', name: '中国', icon: 'Flag' },
        { id: 'usa', name: '美国', icon: 'Building2' },
        { id: 'eu', name: '欧盟', icon: 'Globe' },
        { id: 'japan', name: '日本', icon: 'TrendingUp' },
        { id: 'uk', name: '英国', icon: 'DollarSign' },
        { id: 'asean', name: '东盟', icon: 'Ship' },
        { id: 'india', name: '印度', icon: 'Users' }
      ],
      comparisonItems: [
        { key: 'tradeEase', name: '贸易便利化' },
        { key: 'taxPolicy', name: '税收优惠' },
        { key: 'digitalTrade', name: '数字贸易' },
        { key: 'greenPolicy', name: '绿色政策' },
        { key: 'investment', name: '投资环境' },
        { key: 'compliance', name: '合规要求' }
      ],
      regionData: {
        china: {
          tradeEase: '85分',
          taxPolicy: '80分',
          digitalTrade: '90分',
          greenPolicy: '75分',
          investment: '88分',
          compliance: '82分',
          highlights: [
            { title: 'RCEP贸易便利化', description: '区域全面经济伙伴关系协定下的贸易自由化措施' },
            { title: '跨境电商试验区', description: '105个跨境电商综合试验区政策支持' },
            { title: '一带一路倡议', description: '基础设施建设和贸易投资便利化' }
          ]
        },
        usa: {
          tradeEase: '78分',
          taxPolicy: '85分',
          digitalTrade: '95分',
          greenPolicy: '82分',
          investment: '92分',
          compliance: '88分',
          highlights: [
            { title: 'IRA清洁能源激励', description: '通胀削减法案下的绿色技术税收抵免' },
            { title: 'CHIPS法案', description: '半导体制造业投资激励政策' },
            { title: 'USMCA贸易协定', description: '北美自由贸易协定升级版' }
          ]
        },
        eu: {
          tradeEase: '92分',
          taxPolicy: '75分',
          digitalTrade: '88分',
          greenPolicy: '95分',
          investment: '85分',
          compliance: '90分',
          highlights: [
            { title: 'EU Green Deal', description: '欧洲绿色新政和碳中和目标' },
            { title: 'CBAM碳边境调节', description: '碳边境调节机制防止碳泄漏' },
            { title: '数字服务法DSA', description: '数字平台监管和用户保护' }
          ]
        },
        japan: {
          tradeEase: '80分',
          taxPolicy: '82分',
          digitalTrade: '85分',
          greenPolicy: '78分',
          investment: '84分',
          compliance: '86分',
          highlights: [
            { title: 'CPTPP数字贸易', description: '跨太平洋伙伴关系协定数字贸易规则' },
            { title: 'Society 5.0', description: '数字化社会转型和创新政策' },
            { title: '绿色增长战略', description: '2050年碳中和目标和绿色技术' }
          ]
        },
        uk: {
          tradeEase: '75分',
          taxPolicy: '88分',
          digitalTrade: '82分',
          greenPolicy: '80分',
          investment: '86分',
          compliance: '78分',
          highlights: [
            { title: '全球英国战略', description: '脱欧后的全球贸易和投资政策' },
            { title: '自由港政策', description: '8个自由港的税收和监管优势' },
            { title: '绿色金融中心', description: '伦敦绿色金融和可持续投资中心' }
          ]
        },
        asean: {
          tradeEase: '88分',
          taxPolicy: '70分',
          digitalTrade: '78分',
          greenPolicy: '65分',
          investment: '82分',
          compliance: '72分',
          highlights: [
            { title: 'ASEAN单一窗口', description: '统一的贸易便利化平台' },
            { title: '东盟经济共同体', description: 'AEC货物、服务、投资自由流动' },
            { title: '数字经济框架', description: '2025年数字经济转型目标' }
          ]
        },
        india: {
          tradeEase: '72分',
          taxPolicy: '78分',
          digitalTrade: '80分',
          greenPolicy: '68分',
          investment: '75分',
          compliance: '70分',
          highlights: [
            { title: 'Make in India', description: '制造业促进和外商投资便利化' },
            { title: 'PLI生产激励', description: '生产关联激励计划支持制造业' },
            { title: '数字印度计划', description: '数字基础设施和电子政务' }
          ]
        }
      }
    }
  },
  computed: {
    radarOption() {
      if (this.selectedRegions.length < 2) return {}
      
      const indicators = this.comparisonItems.map(item => ({
        name: item.name,
        max: 100
      }))
      
      const series = this.selectedRegions.map(regionId => ({
        name: this.getRegionName(regionId),
        type: 'radar',
        data: [{
          value: this.comparisonItems.map(item => 
            parseInt(this.regionData[regionId][item.key])
          ),
          name: this.getRegionName(regionId)
        }]
      }))
      
      return {
        backgroundColor: 'transparent',
        tooltip: {
          backgroundColor: 'rgba(26, 37, 61, 0.9)',
          borderColor: '#00f5ff',
          textStyle: {
            color: '#ffffff'
          }
        },
        legend: {
          data: this.selectedRegions.map(id => this.getRegionName(id)),
          textStyle: {
            color: '#ffffff'
          }
        },
        radar: {
          indicator: indicators,
          name: {
            textStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 245, 255, 0.2)'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(0, 245, 255, 0.05)']
            }
          }
        },
        series: [{
          type: 'radar',
          data: this.selectedRegions.map((regionId, index) => ({
            value: this.comparisonItems.map(item => 
              parseInt(this.regionData[regionId][item.key])
            ),
            name: this.getRegionName(regionId),
            itemStyle: {
              color: this.getRegionColor(index)
            },
            areaStyle: {
              color: this.getRegionColor(index, 0.2)
            }
          }))
        }]
      }
    }
  },
  methods: {
    toggleRegion(regionId) {
      const index = this.selectedRegions.indexOf(regionId)
      if (index > -1) {
        this.selectedRegions.splice(index, 1)
      } else {
        if (this.selectedRegions.length < 4) {
          this.selectedRegions.push(regionId)
        }
      }
    },
    
    getRegionName(regionId) {
      const region = this.availableRegions.find(r => r.id === regionId)
      return region ? region.name : regionId
    },
    
    getRegionIcon(regionId) {
      const region = this.availableRegions.find(r => r.id === regionId)
      return region ? region.icon : 'MapPin'
    },
    
    getRegionData(regionId) {
      return this.regionData[regionId] || {}
    },
    
    getScoreClass(score) {
      const numScore = parseInt(score)
      if (numScore >= 90) return 'bg-green-500/20 text-green-400'
      if (numScore >= 80) return 'bg-blue-500/20 text-blue-400'
      if (numScore >= 70) return 'bg-yellow-500/20 text-yellow-400'
      return 'bg-red-500/20 text-red-400'
    },
    
    getRegionColor(index, opacity = 1) {
      const colors = ['#00f5ff', '#ff6b6b', '#ffd93d', '#4da6ff', '#ff9f43', '#6c5ce7', '#a29bfe']
      const color = colors[index % colors.length]
      if (opacity === 1) return color
      return color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)
    }
  }
}
</script>

<style scoped>
.region-selector {
  @apply flex items-center p-4 rounded-lg border border-white/20 cursor-pointer transition-all duration-300;
  background: rgba(15, 23, 42, 0.3);
}

.region-selector:hover {
  @apply border-electric-500/50 bg-white/5;
}

.region-selector.selected {
  @apply border-electric-500 bg-electric-500/10;
}

.policy-highlight-card {
  @apply p-6 rounded-lg;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(0, 245, 255, 0.2);
  backdrop-filter: blur(10px);
}

.highlight-item {
  @apply p-3 rounded-lg;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

table {
  @apply text-sm;
}

th, td {
  @apply border-0;
}
</style> 